<template>
    <div>
        <div style="width: 100%;border: 3px solid #EBEBEB">
            <!--            wid 1505-->
            <div style=";display: flex;justify-content:space-between;width: 1505px;height: 113px;margin: 0 auto">
                <div class=" "
                     style="width: 194px;height: 75px;margin-top: 15px;cursor:pointer;">
                    <el-image fit="cover" style="width: 100%;height: 100%" :src="require('@/assets/img/travel.jpg')"
                              alt="">
                    </el-image>
                </div>
                <div style="width: 800px;display: flex;justify-content: space-around">
                    <!--                    1-->
                    <div
                            style="position: relative;flex-direction: column;display: flex;justify-content: space-around;height: 100%;">
                        <div class="head1 typo" style=";width: 100%;">
                            <router-link style="text-decoration: none" to="/">
                                <div class="zi" style="color: #8C8C8C;cursor: pointer">

                                    <div class=" "> 首页</div>
                                </div>
                            </router-link>
                            <div class="bar1" style="bottom: 30px;position: absolute;width:100%;height:6px;">
                                <div class="bar1-in" style=""></div>

                            </div>

                        </div>
                    </div>
                    <!--                    1-->
                    <div
                            style="position: relative;flex-direction: column;display: flex;justify-content: space-around;height: 100%;">
                        <div class="head1 typo" style=";width: 100%;">
                            <router-link to="/route" style="text-decoration: none">
                                <div class="zi" style="color: #8C8C8C;cursor: pointer">

                                    <div class=" "> 旅游路线</div>
                                </div>
                            </router-link>
                            <div class="bar1" style="bottom: 30px;position: absolute;width:100%;height:6px;">
                                <div class="bar1-in" style=""></div>

                            </div>

                        </div>
                    </div>
                    <div
                            style="position: relative;flex-direction: column;display: flex;justify-content: space-around;height: 100%;">
                        <div class="head1 typo" style=";width: 100%;">
                            <router-link to="/hotel" style="text-decoration: none">

                            <div class="zi" style="color: #8C8C8C;cursor: pointer">

                                <div class=" "> 酒店住宿</div>
                            </div>
                            </router-link>

                            <div class="bar1" style="bottom: 30px;position: absolute;width:100%;height:6px;">
                                <div class="bar1-in" style=""></div>

                            </div>
                        </div>
                    </div>
                    <div
                            style="position: relative;flex-direction: column;display: flex;justify-content: space-around;height: 100%;">
                        <div class="head1 typo" style=";width: 100%;">
                            <router-link to="/story" style="text-decoration: none">
                                <div class="zi" style="color: #8C8C8C;cursor: pointer">

                                    <div class=" "> 旅行故事</div>
                                </div>
                            </router-link>
                            <div class="bar1" style="bottom: 30px;position: absolute;width:100%;height:6px;">
                                <div class="bar1-in" style=""></div>

                            </div>

                        </div>
                    </div>
                    <div
                            style="position: relative;flex-direction: column;display: flex;justify-content: space-around;height: 100%;">
                        <div class="head1 typo" style=";width: 100%;">
                            <router-link style="text-decoration: none" to="/contact">

                            <div class="zi" style="color: #8C8C8C;cursor: pointer">

                                <div class=" "> 联系我们</div>
                            </div>
                            </router-link>

                            <div class="bar1" style="bottom: 30px;position: absolute;width:100%;height:6px;">
                                <div class="bar1-in" style=""></div>

                            </div>

                        </div>
                    </div>
                    <div
                            style="position: relative;flex-direction: column;display: flex;justify-content: space-around;height: 100%;">
                        <div class="head1 typo" style=";width: 100%;">
                            <router-link style="text-decoration: none" to="/about">
                                <div class="zi" style="color: #8C8C8C;cursor: pointer">

                                    <div class=" "> 关于我们</div>
                                </div>
                            </router-link>
                            <div class="bar1" style="bottom: 30px;position: absolute;width:100%;height:6px;">
                                <div class="bar1-in" style=""></div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import IndexTop from "./IndexTop";

    export default {
        name: "IndexHeader",
        components: {IndexTop}
    }
</script>

<style scoped>

</style>